<template>
    <div class="box">
        <div v-if="flag" class="noRecords">
            <el-empty description="暂无租借记录"></el-empty>
        </div>
        <div class="center" v-if="!flag">
            <el-table :data="tableData.slice((pageInfo.page-1)*pageInfo.pageSize,pageInfo.page*pageInfo.pageSize)"
                :row-class-name="tableRowClassName" height="570" style="width: 100%;height: 94.5%;"
                :header-cell-style="{color: '#fff',background:'#3EBABA',textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
                <el-table-column type="index" width="50" label="编号" />
                <el-table-column prop="startTime" label="开始时间" />
                <el-table-column prop="endTime" label="结束时间" />
                <el-table-column prop="rentalMoney" label="消费金额(元)" />
                <el-table-column label="支付状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paymentStatus=='未支付'" @click="pay(scope.row)"
                            style="color: red;cursor: pointer;">{{
                            scope.row.paymentStatus }}</span>
                        <span v-else-if="scope.row.paymentStatus=='待支付'" style="color: rgb(197, 203, 43);">{{
                            scope.row.paymentStatus }}</span>
                        <span v-else style="color: rgb(30, 202, 93);">{{ scope.row.paymentStatus }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="this.pageInfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="this.pageInfo.pageSize"
                layout="->,total, sizes, prev, pager, next, jumper" :total="this.pageInfo.total">
            </el-pagination>
            <el-dialog title="提示" :visible.sync="paydialog" width="30%" style="margin-top: 25vh;">
                <span>是否支付费用！</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="paydialog = false">取 消</el-button>
                    <el-button type="primary" @click="showpay">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="notmoney" width="30%" style="margin-top: 25vh;">
                <span>余额不足，请前往充值中心充值！</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="notmoney = false">关闭</el-button>
                </span>
            </el-dialog>
        </div>

    </div>
</template>
<script>
    import { getrecordAPI, myInformationAPI, updateMoneydAPI, updatepayAPI, getvipIdAPI } from "@/api";
    export default {
        data() {
            return {
                statusData: '',
                notmoney: false,
                paydialog: false,
                moneyData: {
                    ids: '',
                    paymentStatus: '',
                    id: '',
                    money: '',
                    rentalMoney: ''
                },
                moneys: 0,
                flag: false,
                pageInfo: { page: 1, pageSize: 20, total: 0 },
                tableData: [],
                myInformation: ''
            }
        },
        created() {
            this.getRecord()
            this.getvipId()
        },
        methods: {
            //根据用户id获取会员信息
            async getvipId() {
                var id = this.$store.state.userInfo.id
                const { data: res } = await getvipIdAPI(id)
                if (res.status == 0) {
                }
                this.statusData = res.status
            },
            async init() {
                const { data: res } = await myInformationAPI()
                if (res.status == 0) {
                    this.moneys = res.data.money
                    console.log(res)
                }
            },
            //支付费用
            pay(row) {
                this.init()
                this.myInformation = row
                console.log(row)
                this.paydialog = true
            },
            //确认支付
            async showpay() {
                if (this.statusData == 0) {
                    this.moneyData.ids = this.myInformation.ids
                    this.moneyData.paymentStatus = '已支付'
                    const { data: res } = await updatepayAPI(this.moneyData)
                    if (res.status == 0) {
                        this.$message({
                            showClose: true,
                            message: '会员支付成功',
                            type: 'success',
                            offset: 60
                        });
                        this.$emit('userpay', '支付成功')
                        this.paydialog = false
                        this.getRecord()
                    }
                } else {
                    if (this.moneys < this.myInformation.rentalMoney) {
                        this.paydialog = false
                        this.notmoney = true
                    } else {
                        this.moneyData.money = this.moneys - this.myInformation.rentalMoney
                        this.moneyData.ids = this.myInformation.ids
                        this.moneyData.paymentStatus = '已支付'
                        const { data: res } = await updatepayAPI(this.moneyData)
                        console.log(res)
                        if (res.status == 0) {
                            this.$emit('recordmoney', this.moneyData.money)
                            this.$message({
                                showClose: true,
                                message: '支付成功',
                                type: 'success',
                                offset: 60
                            });
                            this.$emit('userpay', '支付成功')
                            this.updateMoney()
                            this.paydialog = false
                            this.getRecord()
                        }
                    }
                }

            },
            //更新用户余额
            async updateMoney() {
                this.moneyData.id = this.$store.state.userInfo.id
                const { data: res } = await updateMoneydAPI(this.moneyData)
                if (res.status === 0) {
                    console.log(res)
                }
            },
            //所有租借记录
            async getRecord() {
                this.tableData = []
                const { data: res } = await getrecordAPI()
                if (res.status === 0) {
                    res.data.forEach(item => {
                        if (item.id == this.$store.state.userInfo.id) {
                            this.tableData.push(item)
                        }
                    });
                    this.pageInfo.total = this.tableData.length
                    if (this.tableData.length == 0) {
                        this.flag = true
                    }
                }
            },
            tableRowClassName({ row, rowIndex }) {
                if (row.paymentStatus == '未支付') {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }
            },
            handleSelectionChange(val) {
                console.log(val)
            },
            handleSizeChange(val) {
                this.pageInfo.pageSize = val
                this.pageInfo.page = 1
            },
            handleCurrentChange(val) {
                this.pageInfo.page = val
            }
        },
    }
</script>
<style scoped>
    /deep/ .el-table .el-table__cell.gutter {
        background-color: #3EBABA;
    }

    /deep/ .el-pagination {
        padding: 10px 5px 0 0;
    }

    /deep/ .el-table .warning-row {
        background: oldlace;
    }

    /deep/ .el-table .success-row {
        background: #f0f9eb;
    }

    /deep/ .el-empty__description p {
        margin: 0;
        font-size: 20px;
        color: #909399;
    }

    .center {
        height: 98%;
        width: 98%;
        padding: 1%;
    }

    .noRecords {
        height: 100%;
        width: 100%;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        height: 100%;
        width: 99.2%;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    }
</style>